<template>
  <div style="height: 100%">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">商家详情</span>
      </x-header>
      <div class="main-headerAndTab">
          <div class="shop-top">
            <div class="detail-left">
              <img :src="shopPicture" alt="">
              <div class="shop-info">
                <div class="shop-name">
                  <span>{{shopName}}</span>
                  <img src="" alt="">
                </div>
                <div class="shop-address">
                  <img src="../../../static/icon/dizhi-2.png" alt="">
                  <span>{{shopAddress}}</span>
                </div>
              </div>
            </div>
              <div class="detail-right">
                <img src="../../../static/icon/shop-icon/dianhua.png" alt="">
              </div>
          </div>
        <group>
          <cell>
            <span slot="title" class="box-tit">精选商品</span>
          </cell>
          <cell-box @click.native="goods_detail" v-for="(item,index) in goodslist" :key="item.id">
            <img :src="item.goodsPic" class="goods-img">
            <div class="goods-detail">
              <span class="goods-name">{{item.goodName}}</span>
              <span class="goods-money">参考价<span class="money">￥{{item.Price}}</span></span>
            </div>
          </cell-box>
        </group>
      </div>
    </div>
  </div>
</template>

<script>
  import { getShopDetail} from '@/api/shop';

  export default {
        name: "shop_detail",
      methods:{
        back(){
          this.$router.go(-1)
        },
        goods_detail(){
          this.$router.push({
            name:'goods-detail'
          })
        },
        getShopDetail(){
          getShopDetail(this.id).then(res =>{
            console.log(res)
            this.shopName=res.shopName;
            this.shopAddress=res.shopAddress;
            this.shopMobile=res.shopMobile;
            this.shopPicture=res.shopPicture;
            this.goodslist=res.goodsList.data;
            console.log(this.goodslist)
          })
        }
      },
    created(){
          this.getShopDetail();
    },
    data(){
          return{
            id:this.globalData.shopid,
            shopName:'',
            shopAddress:'',
            shopMobile:'',
            shopPicture:'',
            goodslist:[],
          }
    }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .shop-top{
    width: 100%;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.08rem;
  }
  .detail-left{
    display: flex;
    flex-direction: row;
    margin-left: 1.07rem;
    margin-top: 1.07rem;
  }
  .detail-left img{
    width: 5.71rem;
    height: 5.71rem;
  }
  .shop-info{
    display: flex;
    flex-direction: column;
    margin-left: 1.01rem;
  }
  .shop-name span{
    font-size: 17px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: center;
  }
  .shop-address{
    margin-top: 1.01rem;
  }
  .shop-address img{
    width: 1.07rem;
    height: 1.07rem;
  }
  .shop-address span{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.36rem;
  }
  .detail-right{
    margin-top: 1.07rem;
    margin-right: 1.08rem;
  }
  .detail-right img{
    width: 1.57rem;
    height: 1.57rem;
  }
  .box-tit{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: center;
  }
  .goods-img{
    width: 4.29rem;
    height: 4.29rem;
  }
  .goods-detail{
    display: flex;
    flex-direction: column;
    margin-left: 1.07rem;
  }
  .goods-name{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
    font-weight: bolder;
  }
  .goods-money{
    margin-top: 0.93rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: 0;
    text-align: justify;
  }
  .money{
    margin-left: 0.07rem;
    font-size: 17px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: justify;
  }
</style>
